import { fileURLToPath, URL } from 'node:url'
import path from 'path';
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import AutoImport from 'unplugin-auto-import/vite' //elements-plus自动引入
import Components from 'unplugin-vue-components/vite'//自动引入
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'//自动引入
import compressPlugin from 'vite-plugin-compression' 
import compresssionBuild from "rollup-plugin-compression";
import type { ICompressionOptions } from "rollup-plugin-compression";
// import postCssPxToRem from "postcss-pxtorem"
 
/**
 * @param {string} dir 目录 
 */
 function resolve(dir: string) {
  return path.join(__dirname, '.', dir)
}

 
 

// https://vitejs.dev/config/
export default defineConfig({
  base: './',
  plugins: [
    vue(), 
    vueJsx(),
    //配置elements-plus自动按需引入
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
        resolvers: [ElementPlusResolver()],
    }),  
  ],
  // ******resolver配置******
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
    extensions: ['.ts', '.js', '.json', '.css', '.scss'],
  }, 
  publicDir: './static',
  // ******开发服务器配置******
  server: {
    // https: true, //(使用https)启用 TLS + HTTP/2。注意：当 server.proxy 选项 也被使用时，将会仅使用 TLS
    host: true, // 监听所有地址
    port: 8066, //指定开发服务器端口：默认3000
    open: true, //启动时自动在浏览器中打开
    cors: false, //为开发服务器配置 CORS
    proxy: {
      '/qcapi': { 
        target: 'http://219.153.49.160:28080', // 开发环境
        changeOrigin: true, //如果接口跨域，需要进行这个参数配置
        secure: false,  // 如果是https接口，需要配置这个参数
      },  
      '/backend': { 
        target: 'http://219.153.49.160:28080', // 开发环境
        changeOrigin: true, //如果接口跨域，需要进行这个参数配置
        secure: false,  // 如果是https接口，需要配置这个参数
      },    
    } 
  }, 
  // ******项目构建配置******
  build: {
    target: 'modules', //设置最终构建的浏览器兼容目标  //es2015(编译成es5) | modules
    outDir: 'dist', // 构建得包名  默认：dist
    assetsDir: 'static', // 静态资源得存放路径文件名  assets 
    sourcemap: false, //构建后是否生成 source map 文件
    // brotliSize: false, // 启用/禁用 brotli 压缩大小报告。 禁用该功能可能会提高大型项目的构建性能
    minify: 'esbuild', // 项目压缩 :boolean | 'terser' | 'esbuild'
    chunkSizeWarningLimit: 1000, //chunk 大小警告的限制（以 kbs 为单位）默认：500
    cssTarget: 'chrome61', // 防止 vite 将 rgba() 颜色转化为 #RGBA 十六进制符号的形式  (要兼容的场景是安卓微信中的 webview 时,它不支持 CSS 中的 #RGBA 十六进制颜色符号)
  
    rollupOptions: {
      // input: {
      //   main: resolve('public/index.html')
      // },
      // 静态资源打包分类
      output: {
        chunkFileNames: 'static/js/[name]-[hash].js',
        entryFileNames: 'static/js/[name]-[hash].js',
        assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
        manualChunks(id) {
          if (id.includes('node_modules')) { // 超大静态资源拆分
            return id.toString().split('node_modules/')[1].split('/')[0].toString()
          }
        }
      }
    },
    // 清除console和debugger
    // terserOptions: {
    //   compress: {
    //     drop_console: true,
    //     drop_debugger: true,
    //   },
    // },
  }, 
  css: {
    preprocessorOptions: {
      // 全局样式引入
      scss: {
        additionalData: '@import "./src/assets/styles/constant/index.scss";',
        javascriptEnabled: true
      }
    },
    // postcss: {
    //   plugins: [
    //     postCssPxToRem({
    //       rootValue: 100, // 1rem的大小
    //       propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
    //     })
    //   ]
    // }
  } 
})
